<template>
  <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
    <card :showDivider="feeDetailIndex != feeOption.childrenList.length - 1" v-if="feeDetailItem.childrenList?.length > 0">
      <template #title>
        <div class="title-box">
          {{ feeDetailItem.feeName }}
          <a-button v-if="feeDetailItem.feeName == '已结算费用退款'" class="ml-2" type="primary" size="mini" @click="onClick">
            费用明细
          </a-button>
        </div>
      </template>
      <page-form-row :gutter="24">
        <template v-if="feeOption.feeCategory == 5 || feeOption.feeCategory == 12">
          <template v-for="item in feeDetailItem.childrenList" :key="item.itemName">
            <page-form-item
              v-if="!(feeOption.feeCategory == 12 && item.payAmount == item.refundAmount)"
              :label="item.showItemName || item.itemName"
              size="1/2"
            >
              <i-input-number v-model="item.amount" />

              <template #label-extra>
                <span v-if="item.payAmount" class="mr-1">
                  实结：<span>{{ item.payAmount }}</span> 元
                </span>
                <span v-if="item.refundAmount">
                  已退：<span>{{ item.refundAmount }}</span> 元
                </span>
              </template>
            </page-form-item>
          </template>
        </template>
        <template v-else>
          <page-form-item :label="feeDetailItem.showItemName || feeDetailItem.itemName" size="1/2">
            <i-input-number v-model="feeDetailItem.amount" />
          </page-form-item>
        </template>
      </page-form-row>
    </card>
  </template>

  <a-modal
    v-model:visible="visible"
    title="费用明细"
    :mask-closable="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    hide-cancel
    width="65vw"
    @before-open="onBeforeOpen"
    @ok="onConfirm"
  >
    <table-index :table="table" @loadData="loadData" />
  </a-modal>
</template>
<script setup lang="ts">
  import { orderFeeRefund, getShortOrdrFeeDetail } from '@/api/order/sOrder'
  import { useFetchTableDataApiNoPage, useTable } from '@/hooks/table'

  import { computed, inject, onMounted, reactive, ref } from 'vue'
  import { useRoute } from 'vue-router'

  const props = defineProps({
    index: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: () => [],
    },
    fromPage: {
      type: String,
      default: '',
    },
  })

  const route = useRoute()
  const currentShortOrderId: any = inject('currentShortOrderId')
  const id = route.params.id || currentShortOrderId.value
  const visible = ref(false)
  const orderInfo: any = inject('addFeeOrderInfo')
  const queryParam = reactive<any>({})
  const table = useTable({
    queryParam,
    pagination: false,
    columns: [
      {
        title: '费用名称',
        dataIndex: 'itemName',
        fixed: 'left',
        width: 100,
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
      },
      {
        title: '操作节点',
        dataIndex: 'createNodeName',
        width: 90,
      },
      {
        title: '结算状态',
        dataIndex: 'feeStatusName',
        width: 90,
      },
      {
        title: '费用类型',
        dataIndex: 'feeTypeName',
        width: 90,
      },
      {
        title: '收支类型',
        dataIndex: 'costTypeName',
        width: 90,
      },
      {
        title: '总额(元)',
        dataIndex: 'amount',
        width: 90,
      },
      {
        title: '实结(元)',
        dataIndex: 'payAmount',
        width: 90,
      },
      {
        title: '未结(元)',
        dataIndex: 'waitPayAmount',
        width: 90,
      },
    ],
    dataList: [],
  })

  const feeOption = computed<any>(() => {
    return props.list[props.index]
  })

  // 获取已结算费用退款
  const getRefundFee = () => {
    if (feeOption.value.feeCategory == 5) {
      feeOption.value.childrenList = [
        {
          feeName: '额外费用退款',
          childrenList: feeOption.value.childrenList,
        },
      ]
      if (orderInfo.value.orderStatus != -100) {
        orderFeeRefund({ id }).then((res: any) => {
          const result = res.result.map((item: any) => {
            return {
              costType: 20,
              amount: props.fromPage == 'returnCar' ? undefined : item.payAmount - item.refundAmount || null,
              feeType: 12,
              itemName: `退款-${item.itemName}`,
              payAmount: props.fromPage == 'returnCar' ? undefined : item.payAmount,
              refundAmount: props.fromPage == 'returnCar' ? undefined : item.refundAmount,
              statics: true,
            }
          })
          feeOption.value.childrenList.unshift({
            feeName: '已结算费用退款',
            childrenList: result,
          })
        })
      }
    }
  }

  // 获取费用明细
  const loadData = () => {
    const fn = useFetchTableDataApiNoPage(table, queryParam, getShortOrdrFeeDetail)
    fn().then((res: any) => {
      table.dataList = res.filter((item: any) => item.feeStatus && item.feeStatus != 0 && item.feeStatus != 9 && item.feeStatus != 90)
    })
  }

  const onBeforeOpen = () => {
    queryParam.orderId = id
    loadData()
  }

  const onConfirm = () => {
    visible.value = false
  }

  const onClick = () => {
    visible.value = true
  }

  onMounted(() => {
    getRefundFee()
  })
</script>
<style lang="less" scoped>
  .title-box {
    display: flex;
    align-items: center;
  }
</style>
